<template>
    <div class="face">
        <face-title></face-title>
        <face-top></face-top>
        <face-mida></face-mida>
        <face-midb :list="iconList"></face-midb>
        <face-btn></face-btn>
    </div>
</template>
<script>
import FaceTitle from './components/FaceTitle.vue'
import FaceTop from './components/FaceTop.vue'
import FaceMida from './components/FaceMida.vue'
import FaceMidb from './components/FaceMidb.vue'
import FaceBtn from './components/FaceBtn.vue'
import axios from 'axios'
export default {
    name:'Face.vue',
    components:{
     FaceTitle,
     FaceTop,
     FaceMida,
     FaceMidb,
     FaceBtn
    },

 data: function(){
        return{
        
         iconList: []
        }
    }, 
    mounted(){
      this.getHomeApiInfo()
    },
    methods:{
      getHomeApiInfo(){
          axios.get("../../mock/hair.json").then(this.getHomeResponseInfo)
      },
        getHomeResponseInfo(response){
        //  console.log(response.data);
        let res = response.data  //就是home.json里面的内容
        console.log(res);
        console.log(res.success);//undefined =>???
        console.log(res.dataList);//undefined =>???
        if(res.success && res.dataList){
          const data = res.dataList //取json中的datalist属性
          // console.log(data.iconLists.length)
          this.iconList = data.iconLists
          
        }
      }
 }
}
</script>

